<template>
	<view>
		<view class="page-container">
			<view class="main-container">
				<view class="coupon-list" v-if="couponArr && couponArr.length > 0">
					<!-- parse <template is="coupon" :data="couponArr, couponBtnText, baseurl"></template> -->
					<block name="coupon">
						<view class="temp-coupon-list" v-if="couponArr && couponArr.length > 0">
							<view
								:class="'temp-coupon-item ' + (couponCodeStatus == 2 || couponCodeStatus == 3 ? 'temp-coupon-offline' : '')"
								v-for="(item, index) in couponArr" :key="index">
								<view :class="'temp-coupon-item-left ' + ('origin' + item.couponOrigin)"
									:style="'color:' + (item.couponOrigin == '0' ? '#ff7303' : '#FF1744') + ';background: ' + (item.couponSource == '2' ? '#ffc4bd' : '') + ';'">
									<!-- 优惠券预览图 -->
									<image style="width: 100%; height: 100%"
										v-if="'7' == item.couponType && !util.isEmpty(item.pic)"
										:src="baseurl + '/' + item.pic"></image>
									<image style="width: 100%; height: 100%"
										v-else-if="'7' == item.couponType && !util.isEmpty(item.picUrl)"
										:src="baseurl + '/' + item.picUrl"></image>
									<image style="width: 100%; height: 100%" v-else-if="'7' == item.couponType"
										src="/static/image/coupon/default_icon.png"></image>
									<image class="temp-coupon-origin"
										v-if="(item.couponOrigin == '0' || item.couponOrigin == '') && (item.couponSource == '1' || item.couponSource == '7')"
										src="/static/image/common/coupon_origin/ic_sjq.png"></image>
									<image class="temp-coupon-origin"
										v-if="(item.couponOrigin == '0' || item.couponOrigin == '') && item.couponSource == '2'"
										src="/static/image/common/coupon_origin/ic_ptq.png"></image>
									<image class="temp-coupon-origin" v-if="item.couponOrigin == '1'"
										src="/static/image/common/coupon_origin/ic_wxq.png"></image>
									<image class="temp-coupon-origin" v-if="item.couponOrigin == '2'"
										src="/static/image/common/coupon_origin/ic_ysf.png"></image>
									<image class="temp-coupon-origin" v-if="item.couponOrigin == '3'"
										src="/static/image/common/coupon_origin/ic_zfb.png"></image>
									<image class="temp-coupon-origin"
										v-if="item.couponOrigin == '0' && item.couponSource == '6'"
										src="/static/image/common/coupon_origin/ic_zjq.png"></image>
									<view class="temp-coupon-discount-info" v-if="'7' != item.couponType">
										<block
											v-if="'1' == item.couponType || '3' == item.couponType || '5' == item.couponType || '6' == item.couponType">
											<text class="temp-icon-price">￥</text>
											<text class="temp-icon-discount" v-if="item.discountLength == 5"
												style="font-size: 44rpx">
												{{ util.formatFenMoney(item.discountAmt) }}
											</text>
											<text class="temp-icon-discount" v-else-if="item.discountLength == 6"
												style="font-size: 36rpx">
												{{ util.formatFenMoney(item.discountAmt) }}
											</text>
											<text class="temp-icon-discount" v-else-if="item.discountLength >= 7"
												style="font-size: 32rpx">
												{{ util.formatFenMoney(item.discountAmt) }}
											</text>
											<text class="temp-icon-discount"
												v-else>{{ util.formatFenMoney(item.discountAmt) }}</text>
										</block>
										<block v-if="'2' == item.couponType || '4' == item.couponType">
											<text class="temp-icon-discount">{{ item.discountAmt }}</text>
											<text class="temp-icon-price">折</text>
										</block>
									</view>
								</view>

								<view class="temp-coupon-item-middle">
									<view class="temp-coupon-tips" v-if="item.couponOrigin == '1' && item.usedTips">
										{{ item.usedTips }}</view>
									<view class="temp-coupon-middle-top">
										<text class="temp-coupon-name"
											v-if="'6' == item.couponType || '7' == item.couponType">{{ item.couponName }}</text>
										<text class="temp-coupon-name"
											v-else>满{{ util.formatFenMoney(item.useCondAmt) }}元可用</text>
										<text class="temp-coupon-type reduce"
											v-if="item.couponType == '1' || '3' == item.couponType || '5' == item.couponType">满减券</text>
										<text class="temp-coupon-type"
											v-if="item.couponType == '2' || '4' == item.couponType">折扣券</text>
										<text class="temp-coupon-type reduce" v-if="'6' == item.couponType">代金券</text>
										<text class="temp-coupon-type reduce" v-if="'7' == item.couponType">兑换券</text>
									</view>
									<view class="temp-coupon-middle-bottom">
										<view v-if="item.expireDateType == 1">活动期至{{ item.expireEndTime }}</view>
										<view v-if="item.expireDateType == 2">领取后{{ item.expireDaysNum }}天有效</view>
									</view>
								</view>

								<block v-if="item.qrcode">
									<view class="temp-coupon-item-right" :data-coupon="item"
										@tap.stop.prevent="goToCoupon">
										<view class="temp-coupon-right-get">{{ couponCodeStatus == 1 ? '立即使用' : '查看' }}
										</view>
									</view>
								</block>

								<block v-else>
									<view class="temp-coupon-item-right" v-if="item.isFree" :data-coupon="item"
										@tap.stop.prevent="goToCoupon">
										<view class="temp-coupon-right-get" v-if="couponBtnText != null">
											{{ couponBtnText }}</view>
										<view class="temp-coupon-right-get" v-else-if="item.isLineIssuedStamps != '1'">
											立即领取</view>
										<view v-else>扫码领取</view>
									</view>
									<view class="temp-coupon-item-right" v-if="!item.isFree" :data-coupon="item"
										@tap.stop.prevent="goToCoupon">
										<view class="temp-coupon-buy-price" v-if="item.exchangeType == 1">
											<text>{{ item.exchangePoint }}</text>
											<text>积分</text>
										</view>
										<view class="temp-coupon-buy-price" v-if="item.exchangeType == 2">
											<text>￥</text>
											<text>{{ item.exchangePrice }}</text>
										</view>
										<view class="temp-coupon-buy-price temp-price-point"
											v-if="item.exchangeType == 3">
											<text
												style="font-size: 28rpx; font-weight: 600">{{ item.exchangePoint }}</text>
											<text style="font-size: 18rpx">积分</text>
											<text style="font-size: 18rpx">+</text>
											<text style="font-size: 18rpx">￥</text>
											<text
												style="font-size: 28rpx; font-weight: 600">{{ item.exchangePrice }}</text>
										</view>
										<view class="temp-coupon-right-get" v-if="couponBtnText != null">
											{{ couponBtnText }}</view>
										<view class="temp-coupon-right-get" v-else-if="item.isLineIssuedStamps != '1'">
											去兑换</view>
										<view v-else>扫码领取</view>
									</view>
								</block>
							</view>
						</view>
						<view class="temp-coupon-list" v-else>
							<view class="temp-coupon-empty">
								<image class="temp-coupon-empty-img" src="/static/image/icon_coupon_empty.png"></image>
								<text class="temp-coupon-empty-tip">暂无优惠券</text>
							</view>
						</view>
					</block>
				</view>
				<view class="coupon-list" v-else>
					<view class="coupon-empty">
						<image class="coupon-empty-img" src="/static/image/icon_coupon_empty.png"></image>
						<text class="coupon-empty-tip">暂无优惠券</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script module="util" lang="wxs" src="../../../utils/util.wxs"></script>
<script>
	const app = getApp();

	const utils = require('../../../utils/util.js');
	import {http} from '@/utils/commonRequest.js';

	export default {
		data() {
			return {
				loading: true,
				baseImageUrl: app.globalData.baseImageUrl,
				baseurl: app.globalData.baseurl,
				couponArr: [],
				couponBtnText: '去查看',
				couponCodeStatus: 0
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			let that = this;
			this.$checkLogin().then((res) => {
				that.queryPlatCoupon();
			});
		},
		methods: {
			/**
			 * 查询平台优惠券（U豆抢优惠模块）
			 */
			queryPlatCoupon: function() {
				let that = this;
				http.get('/managerCoupon/getManagerCoupons', {}).then((res) => {
					res = res.data
					console.log(res);

					if (200 == res.code) {
						let couponArr = res.couponArr;

						if (undefined == couponArr) {
							couponArr = [];
						}

						console.log(couponArr);
						couponArr.map((v) => {
							let num = v.discountAmt / 100;
							let str = num.toString();
							v.discountLength = str.length;
						}); // console.log(couponArr);

						that.couponArr = couponArr
						that.loading = false
					} else {
						that.loading = false
						console.log('U豆抢优惠加载失败：', res.msg);
					}
				});
			},

			goToCoupon: function(e) {
				let coupon = e.currentTarget.dataset.coupon;
				let couponId = coupon.couponId;
				let saleRuleId = coupon.exchangeId ? coupon.exchangeId : '';
				uni.navigateTo({
					url: '/pages/coupon/couponDetail/managerCouponDetail?couponId=' + couponId +
						'&saleRuleId=' + saleRuleId
				});
			}
		}
	};
</script>
<style>
	@import '../../../templates/zsnshTemplates.css';

	page {
		background-color: #fff;
	}

	.banner-container {
		position: relative;
		width: 100%;
		height: 394rpx;
	}

	.banner {
		width: inherit;
		height: inherit;
	}

	.main-container {
		position: relative;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
	}

	.title-container {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
		margin-bottom: 36rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
		margin-right: 16rpx;
		line-height: 44rpx;
	}

	.coupon-item {
		overflow: hidden;
		display: flex;
		margin: 0 auto 24rpx;
		width: 686rpx;
		height: 156rpx;
		background: #ffffff;
		border-radius: 16rpx;
		/* background: linear-gradient(140deg, #FFEDE3 0%, #FFE0BB 100%); */
		box-shadow: 0 8rpx 20rpx 0 rgba(28, 38, 69, 0.1);
	}

	.coupon-item-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 156rpx;
		height: 100%;
		background: linear-gradient(131deg, #ffede3 0%, #ffe0bb 100%);
		color: #ff7303;
	}

	.coupon-discount-info {
		display: flex;
		align-items: flex-end;
		letter-spacing: -1px;
		line-height: 1;
	}

	.icon-discount {
		font-size: 58rpx;
		font-weight: bold;
		margin-right: 4rpx;
	}

	.icon-price {
		font-size: 26rpx;
	}

	.coupon-item-middle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 342rpx;
		margin: 16rpx 0;
		padding: 0 10rpx;
		border-right: 2px dashed rgba(0, 0, 0, 0.1);
	}

	.coupon-middle-top {
		display: flex;
		align-items: center;
	}

	.coupon-type {
		padding: 0 10rpx;
		line-height: 40rpx;
		background: #fd966b;
		border-radius: 18rpx;
		color: #fff;
		font-size: 20rpx;
		flex-shrink: 0;
	}

	.coupon-type.reduce {
		background: linear-gradient(143deg, #ffb4ab 0%, #ff9386 100%);
	}

	.coupon-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-right: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		letter-spacing: -1px;
	}

	.coupon-middle-bottom {
		margin-top: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24rpx;
		color: #777;
		letter-spacing: -0.5px;
	}

	.coupon-item-right {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.coupon-item-right::before {
		position: absolute;
		content: ' ';
		width: 24rpx;
		height: 12rpx;
		background-color: #f9f9f9;
		top: 0;
		left: -14rpx;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
	}

	.coupon-item-right::after {
		position: absolute;
		content: ' ';
		width: 24rpx;
		height: 12rpx;
		background-color: #f6f6f6;
		bottom: 0;
		left: -14rpx;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}

	.coupon-buy-price {
		color: #ff7303;
		font-size: 32rpx;
		letter-spacing: -1px;
		line-height: 44rpx;
		margin-bottom: 8rpx;
		font-weight: bold;
	}

	.price-point {
		font-size: 24rpx;
	}

	.coupon-right-get {
		width: 128rpx;
		line-height: 52rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		background: linear-gradient(140deg, #ffc996 0%, #fc4c2c 100%);
		box-shadow: 0px 4rpx 8rpx 0px rgba(253, 96, 61, 0.22);
		border-radius: 26rpx;
	}

	.coupon-empty {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.coupon-empty-img {
		width: 644rpx;
		height: 310rpx;
	}

	.coupon-empty-tip {
		font-size: 28rpx;
		font-family: PingFangSC-Light, PingFang SC;
		font-weight: 300;
		color: #666666;
		line-height: 40rpx;
		margin-top: 44rpx;
	}

	/* 优惠券为已过期或者已使用状态 */
	.coupon-offline .coupon-item-left,
	.coupon-offline .coupon-type,
	.coupon-offline .coupon-right-get {
		background: #ccc;
		box-shadow: none;
	}

	/* 如果是满减券 */
	.red-color {
		background: linear-gradient(138deg, #ffe7e4 0%, #ffc4bd 100%) !important;
	}

	.red-color .coupon-item-left {
		background: linear-gradient(140deg, #ffe7e4 0%, #ffc4bd 100%);
	}

	.red-color .coupon-item-left {
		color: #ff262e;
	}

	.red-color .coupon-buy-price {
		color: #ff262e;
	}
</style>
